import React from 'react'
import { Tabbar } from 'react-vant'
import { HomeO, AddSquare, ChatO } from '@react-vant/icons'
import { useNavigate } from 'react-router-dom'
import IconFont from './Inco'

export default function Tab() {

    let navigate = useNavigate()
    return (
        <div style={{
            position: 'fixed',
            bottom: '0',
        }}>
            <Tabbar activeColor='orange' inactiveColor='#000'>
                <Tabbar.Item icon={<HomeO />} onClick={() => { navigate('/home') }}>首页</Tabbar.Item>
                <Tabbar.Item icon={<IconFont type='icon-ditu' />} onClick={() => { navigate('/') }}>地图区</Tabbar.Item>
                <Tabbar.Item icon={<AddSquare style={{ color: 'orange', fontSize: '25px' }} />}
                    onClick={() => { navigate('/sdk') }}>发布</Tabbar.Item>
                <Tabbar.Item icon={<ChatO />} badge={{ content: '0' }} onClick={() => { navigate('/') }}>消息</Tabbar.Item>
                <Tabbar.Item icon={<IconFont type='icon-wode-xianxing' />} onClick={() => { navigate('/myapp') }}>我的</Tabbar.Item>
            </Tabbar>
        </div>
    )
}
